<template>
  <div class="body">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-card class="box-card-left">
            <div slot="header" class="clearfix">
              <span style="line-height: 36px;">快捷菜单</span>
              <el-button style="float: right;" type="text">编辑</el-button>
            </div>
            <!--            <div class="develop">-->
            <!--              <img class="develop-bg" :src="developImg">-->
            <!--              <p class="develop-text">正在开发中. . .</p>-->
            <!--            </div>-->
            <el-button class="btn" type="primary">风险控制</el-button>
            <el-button class="btn" type="primary">支付宝收款</el-button>
            <el-button class="btn" type="primary">微信收款</el-button>
            <el-button class="btn" type="primary">线下转账</el-button>
            <el-button class="btn" type="primary">白名单管理</el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card-middle-top">
            <div slot="header" class="clearfix">
              <span style="line-height: 36px;">待办事项</span>
              <el-button style="float: right;" type="text">查看更多></el-button>
            </div>
            <div class="develop">
              <!--              <img class="develop-bg" :src="developImg">-->
              <!--              <p class="develop-text">正在开发中. . .</p>-->
              <ul>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月19日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月18日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月17日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月16日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月15日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月14日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月13日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月12日</span></li>
                <li><a>【线下转账】你有一个【任务编号】等待处理</a><span>1月11日</span></li>
              </ul>
            </div>
          </el-card>
          <el-card class="box-card-middle-bottom">
            <div slot="header" class="clearfix">
              <span style="line-height: 36px;">消息提醒</span>
              <el-button style="float: right;" type="text">查看更多></el-button>
            </div>
            <div class="develop">
              <!--              <img class="develop-bg" :src="developImg">-->
              <!--              <p class="develop-text">正在开发中. . .</p>-->
              <ul>
                <li><a>【风险拦截】进件编号xxxxxxxx，拦截成功。</a><span>1月19日</span></li>
                <li><a>【复议】编号xxxxxxxx，发起复议。</a><span>1月18日</span></li>
                <li><a>【疏失认定】进件编号xxxxxxxx，已认定疏失。</a><span>1月17日</span></li>
                <li><a>【风险拦截】进件编号xxxxxxxx，拦截成功。</a><span>1月19日</span></li>
                <li><a>【复议】编号xxxxxxxx，发起复议。</a><span>1月18日</span></li>
                <li><a>【疏失认定】进件编号xxxxxxxx，已认定疏失。</a><span>1月17日</span></li>
              </ul>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card-right-top">
            <div slot="header" class="clearfix">
              <span style="line-height: 36px;">系统入口</span>
            </div>
            <el-card v-for="(item,index) in systemList" :key="index" class="sysIcon" @click.native="clickUrl(item.httpUrl)">
              <img :src="item.imgUrl" class="sysImage">
              <div class="sysText">
                {{ item.name }}
              </div>
            </el-card>
          </el-card>
          <el-card class="box-card-right-bottom">
            <!--            <div slot="header" class="clearfix">-->
            <!--              <span style="line-height: 36px;">日历</span>-->
            <!--            </div>-->
            <!--            <div class="develop">-->
            <!--              <img class="develop-bg" :src="developImg">-->
            <!--              <p class="develop-text">正在开发中. . .</p>-->
            <!--</div>-->
            <el-calendar v-model="calendar" class="calendar" />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div class="footer"><span>&copy; 2020 Pan Gu Microservice,<a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a></span></div>
  </div>
</template>

<script>
import { getSystemInfo } from '@/api/system.js'

export default {
  name: 'Dashboard',
  components: {
  },
  data() {
    return {
      developImg: require('@/assets/portal/developping.png'),
      auth: require('@/assets/portal/auth.png'),
      systemList: [],
      calendar: new Date()
    }
  },
  created() {
    this.getSystemList()
  },
  methods: {
    clickUrl(url) {
      window.open(url, '_blank')
    },
    getSystemList() {
      getSystemInfo().then(response => {
        const res = response.retBody
        this.systemList = res
      })
    }
  }
}

</script>
<style>
  .body{
    margin-top: 10px;
  }
  .develop-bg{
    height: 100%;
    width: 100%;
  }
  .bg-purple {
    height: 880px
  }
  .main-container{
    min-height:unset;
  }
  .grid-content {
  border-radius: 4px;
  min-height: 36px;
  }

  .clearfix:before,
  .clearfix:after {
  display: table;
  content: "";
  }
  .clearfix:after {
  clear: both
  }

  .box-card-left {
  width: 100%;
  height: 860px;
  }
  .box-card-middle-top {
  width: 100%;
  height: 450px;
  margin-bottom: 20px;
  }
  .box-card-middle-bottom{
  width: 100%;
  height: 390px
  }
  .box-card-right-top {
  width: 100%;
  height: 390px;
  margin-bottom: 20px;
  position: relative;
  }
  .box-card-right-bottom{
  width: 100%;
  height: 450px
  }
  .sysImage {
  width: 60%;
  display: block;
  margin: 0 auto;
  }
  .sysIcon{
  width: 150px;
  height: 120px;
  float: left;
  margin: 10px 18px;
  }
  .develop{
  /*height: 200px;*/
  /*width: 200px;*/
  margin: 0 auto;
  }
  .sysText{
  text-align: center;
  line-height: 30px;
  }
  .develop-text{
  text-align: center;
  color: rgba(61, 61, 61, 0.47);
  }
  .footer{
    width: 100%;
  }
  .footer span{
    text-align: center;
    display: block;
    color: rgba(61, 61, 61, 0.47);
  }
  .btn{
    float: left;
    display: inline;
    margin: 5px 8px;
  }
  .develop ul li {
    margin: 10px 0px;
    font-family: cursive;
    font-size: 16px;
    color: #5c5a5a;
    list-style-type: none;
  }
  ul li a{
  }
  ul li span{
    float: right;
  }
  .el-calendar-table .el-calendar-day {
    height: 48px;
  }
</style>
